<template>
  <div class="login-page">
    <nav-bar theme="black" :left-arrow="false" apply></nav-bar>
    <div class="login-main page-main" style="margin-top: 44px">
      <div class="login-title">
        <p>您好，</p>
        <p>欢迎登录网格员系统</p>
      </div>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit">
        <van-field
          readonly
          clickable
          size="large"
          v-model="formParams.regionCodeName"
          placeholder="请选择地区"
          right-icon="arrow"
          :rules="rules.regionCodeName"
          @click="cascadeOpenPopup('regionCode', '地区')"
        />
        <van-field size="large" v-model="formParams.loginName" :rules="rules.loginName" placeholder="请输入手机号" />
        <van-field
          size="large"
          v-model="formParams.passWord"
          :type="passwordVisible ? 'text' : 'password'"
          :right-icon="passwordVisible ? 'eye' : 'closed-eye'"
          placeholder="请输入密码"
          :rules="rules.passWord"
          @click-right-icon="passwordVisible = !passwordVisible"
        />
        <van-field
          label-class="van-cell__title_gray"
          :border="false"
          @click-right-icon="$router.push('/login/password')"
        >
          <template #input>
            <van-checkbox v-model="formParams.remember" shape="square" icon-size="14" class="van-checkbox__label__gray">
              记住密码
            </van-checkbox>
          </template>
          <template #right-icon>
            <span>忘记密码</span>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button
            block
            type="info"
            native-type="submit"
            size="large"
            :loading="button.loading"
            :disabled="button.disabled"
          >
            {{ button.text }}
          </van-button>
        </div>
        <p class="login-read">
          点击登录即表示阅读并同意
          <router-link to="/login/agreement/user" class="login-read-link">《用户协议》</router-link>
          与
          <router-link to="/login/agreement/privacy" class="login-read-link">《隐私权政策》</router-link>
        </p>
      </van-form>
    </div>
    <!-- 联级 -->
    <van-popup v-model="cascadePopupShow" round position="bottom" @close="cascadeValue = ''">
      <van-cascader
        v-model="cascadeValue"
        :title="cascadeTitle"
        :options="cascadeData[cascadeType]"
        :field-names="{ text: 'title', value: 'code' }"
        :closeable="false"
        @finish="cascadeOnFinish"
      />
    </van-popup>
  </div>
</template>
<script>
import Login from '@/api/login'
import General from '@/api/general'
import { phoneReg } from '@/libs/regexp'
import { getCookie, setCookie } from '@/libs/cookie'
import SelectPopup from '@/mixins/selectPopup'
import LoginMixin from './mixins/login'
const Base64 = require('js-base64').Base64
export default {
  mixins: [LoginMixin, SelectPopup],
  data() {
    return {
      formParams: {
        regionCodeName: '',
        regionCode: '',
        loginName: '',
        passWord: '',
        remember: false
      },
      rules: {
        regionCodeName: [{ required: true, message: '请选择地区' }],
        loginName: [
          { required: true, message: '请输入手机号' },
          { pattern: phoneReg, message: '请输入正确的手机号' }
        ],
        passWord: [{ required: true, message: '请输入密码' }]
      },
      passwordVisible: false,
      button: {
        disabled: false,
        loading: false,
        text: '登录'
      }
    }
  },
  created() {
    const regionCode = getCookie('regionCode')
    const regionCodeName = getCookie('regionCodeName')
    const loginName = getCookie('loginName') // 在页面加载时从cookie获取登录信息
    const passWord = Base64.decode(getCookie('passWord')) // 创建时从cookie获取密码并解密
    const remember = getCookie('remember')
    const isRemember = remember !== 'false'
    if (loginName) {
      // 如果存在赋值给表单
      this.formParams.regionCode = regionCode
      this.formParams.regionCodeName = regionCodeName
      this.formParams.loginName = loginName
      this.formParams.passWord = passWord
      this.$nextTick(() => {
        this.formParams.remember = isRemember // 记住密码的状态
      })
    }
  },
  mounted() {
    // 获取行政区划
    this.getRegionCode().then(res => {
      // 地区
      this.getTree(res.data.data)
    })
  },
  methods: {
    // 获取行政区划
    async getRegionCode() {
      return await General.Region.getRegionCode({
        ip: document.location.host.indexOf('localhost') > -1 ? '188.188.33.24:86' : document.location.host
      })
    },
    // 地区
    getTree(regionCode = '360100') {
      General.Region.getTree({
        regionCode
      }).then(res => {
        this.cascadeData.regionCode = res.data.data
      })
    },
    onSubmit() {
      this.button.disabled = true
      this.button.loading = true
      this.button.text = '登录中...'
      Login.Login.login(this.formParams)
        .then(res => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '登录'
          const { data, status, message } = res.data
          if (status === 0) {
            // 只有校验通过、登录成功时才存储表单信息   否则不存储
            this.setUserInfo()
            this.setData(data)
            this.getRegionCode()
          } else {
            this.$toast.fail(message)
          }
        })
        .catch(() => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '登录'
        })
    },
    setUserInfo() {
      // 储存表单信息
      setCookie('loginName', this.formParams.loginName, 30)
      setCookie('regionCode', this.formParams.regionCode, 30)
      setCookie('regionCodeName', this.formParams.regionCodeName, 30)
      if (this.formParams.remember) {
        // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息， 如果没有勾选，储存的密码信息为空
        const passWord = Base64.encode(this.formParams.passWord) // base64加密密码
        setCookie('passWord', passWord, 30)
        setCookie('remember', this.formParams.remember, 30)
      } else {
        setCookie('passWord', '')
        setCookie('remember', this.formParams.remember, 30)
      }
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/login/index.less';
</style>
